{{ define "content" }}
<article class="fbox">
  <form class="contact-form" action="/admin/edit" method="post" role="form">
    <input id="_id" type="text" name="_id" style="display:none;" value="{{ .Post.Id }}">
    <input id="selectedtype" type="text" name="type" style="display:none;" value="{{ .Post.Type }}">
    <input id="selectedtag" type="text" name="tags" style="display:none;" value="{{ .Post.Tags }}">
    <div class="field">
      <label>文章标题</label>
      <div style="display: flex;">
        <input style="flex-grow:1;" type="text" name="title" value="{{ .Post.Title }}" required=""
          aria-required="true">
        <select class="dropdown" >
          <option value="原" {{ if eq .Post.Type 0 }}selected{{ end }}>原创</option>
          <option value="译" {{ if eq .Post.Type 1 }}selected{{ end }}>翻译</option>
          <option value="转" {{ if eq .Post.Type 2 }}selected{{ end }}>转载</option>
        </select>
      </div>
    </div>
    <div class="field">
      <label>文章内容</label>
      <textarea name="content" rows="10" required="" aria-required="true">{{ .Post.Content }}</textarea>
    </div>
    <div class="field">
      <label>文章类别</label>
      <div class="wp-block-jetpack-contact-form" style="margin-bottom: 1.5em;">
        {{ range .SelectTags }}
        <div style="margin-right: 1em;" class="itemtag">
          <input type="checkbox" value="{{ .Name }}"><span>{{ .Name }}</span>
        </div>
        {{ end }}
      </div>
    </div>
    <div class="field">
      <button type="submit" class="button">
        提交<i class="checkmark icon"></i>
      </button>
    </div>
  </form>
</article>
{{ end }}
{{ define "extend_script" }}
<script>
  var $ = jQuery;
  $('select.dropdown').on('change', function () {
    $('#selectedtype').val($(this).val());
  })

  var tagList = $('#selectedtag').val().replace(/\[|\]/g, '').split(';')
  tagList = tagList.filter(a => a);
  $('.itemtag input').each(function () {
    const name = $(this).siblings('span').html();
    if (tagList.indexOf(name) >= 0) {
      $(this).prop("checked", true);
    }
  });
  $('.itemtag input').change(function () {
    var name = $(this).siblings('span').html();
    var ischecked = $(this).prop("checked");
    if (ischecked) {
      if (tagList.indexOf(name) < 0) {
        tagList.push(name);
        $('#selectedtag').val(tagList.join(';'));
      }
    } else {
      var i = tagList.indexOf(name);
      if (i >= 0) {
        tagList.splice(i, 1);
        $('#selectedtag').val(tagList.join(';'));
      }
    }
  })
</script>
{{ end }}